<template>
	<view class="tabbar posif w750 z-999 bg-white dflex alc jcse">
		<view
			v-for="(item, index) in list"
			:key="index"
			class="tabbar-item dflex alc jcse flexd"
			@click="handerTab(item, index)"
		>
			<view class="tabbar-img" style="height: 124rpx;">
				<view
					style="width: 80rpx;height: 80rpx;"
					v-if="index === props.select"
					class="dflex alc jcc borderbox"
					:class="index === props.select ? 'active2' : ''"
				>
					<image :src="item.selectedIconPath" mode="widthFix" class="img-active"></image>
				</view>
				<view style="width: 80rpx;height: 80rpx;" v-else class="dflex alc jcc borderbox">
					<image :src="item.iconPath" mode="widthFix" class="img"></image>
				</view>
			</view>
			<view
				style="color: #9BAECD;"
				:class="select === index ? 'active' : ''"
				class="posif img-text"
			>
				{{ item.text }}
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, defineProps } from 'vue';
let props = defineProps({
	select: {
		type: Number,
		default: 0
	}
});
let list = reactive([
	{
		iconPath: '/static/index.png',
		selectedIconPath: '/static/index_select.png',
		pagePath: '/pages/index/index',
		text: '首页'
	},
	{
		iconPath: '/static/product.png',
		selectedIconPath: '/static/product_select.png',
		pagePath: '/pages/product/product',
		text: '产品'
	},
	{
		iconPath: '/static/info.png',
		selectedIconPath: '/static/info_select.png',
		pagePath: '/pages/info/info',
		text: '资讯'
	},
	{
		iconPath: '/static/my.png',
		selectedIconPath: '/static/my_select.png',
		pagePath: '/pages/my/my',
		text: '我的'
	}
]);
let handerTab = (item, index) => {
	uni.switchTab({
		url: item.pagePath
	});
};
</script>

<style lang="scss" scoped>
.tabbar {
	width: 100%;
	height: 124rpx;
	bottom: 0;
	background-color: #fff;
	.tabbar-item {
		.tabbar-img {
			image {
				width: 40rpx;
				height: auto;
			}
		}
	}
}
.img-active {
	width: 80rpx !important;
	height: auto;
}
.active {
	color: #e1251b !important;
}
.active2 {
	padding-bottom: 8rpx !important;
}
.img-text {
	bottom: 14rpx;
}
</style>
